<template>
  <el-form :model="form" label-width="120px" class="wrap" v-loading="loading" element-loading-text="动画导出中...">
    <div class="title">解包饥荒中data\anim\xxx.zip动画文件。</div>
    <el-form-item label="动画文件">
      <div>
        <div>
          <el-button @click="selectAnim">选择(可多选)</el-button>
        
        </div>
        <div>
          <div v-for="v in form.aminList">{{v}}</div>
        </div>
      </div>
    </el-form-item>

    <el-form-item label="导出路径">
      <el-input v-model="form.outDir">
        <template #append>
          <el-button @click="selectOutDir">选择</el-button>
    
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="">
      <el-button type="primary" @click="outPut">开始导出</el-button>
    </el-form-item>

  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { TabsPaneContext , ElMessageBox } from 'element-plus'
const electronAPI = window.electronAPI

let loading = ref(false)
const form = reactive({
  outDir: '',
  aminList:[] as any[],
})

let pwd = electronAPI.pwd()
console.log(pwd)
const selectAnim = async () => {
  const filePath = await electronAPI.selectFile({
    title: "选择动画文件",
    properties: ['multiSelections'],
    setkey: 'selectAnim',
    filters: [
      { name: '动画文件', extensions: ['zip'] },
    ]
  })
  console.log(filePath)
  if(filePath) {
    form.aminList = filePath
  }
}

const selectOutDir = async () => {
  const filePath = await electronAPI.selectFile({
    title: "选择导出路径",
    setkey: 'selectOutDir',
    properties: ['openDirectory'],
  })
  console.log(filePath)
  if(filePath) {
    form.outDir = filePath[0]
  }
}

const outPut = async () => {
  var regex = /[\u4e00-\u9fa5]/;
  console.log(regex.test(pwd))
  if(regex.test(pwd)){
    ElMessageBox.alert('本软件的存放路径不能有中文，请将软件移动到全英文路径下再试。', {
      confirmButtonText: '好的',
    })
    return
  }

  if(form.aminList.length == 0 ){
    ElMessageBox.alert('请先选择要解压的动画文件', {
      confirmButtonText: '好的',
    })
    return
  }

  if(!form.outDir){
    ElMessageBox.alert('请先选择导出路径', {
      confirmButtonText: '好的',
    })
    return
  }


  if(regex.test(form.outDir)){
    ElMessageBox.alert('导出路径中不能包含中文', {
      confirmButtonText: '好的',
    })
    return
  }

  loading.value = true
  const filePath = await electronAPI.unzip(JSON.stringify(form.aminList), form.outDir)
  console.log(filePath)
  loading.value = false
  ElMessageBox.alert('导出完成', '成功', {
    confirmButtonText: 'OK',
    callback: () => {
      electronAPI.openDir(form.outDir)
    },
  })

}


</script>
